<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> 
    <!--
    Author Lu Xiaodi
    -->
    <h:head> 
        <title>IOTR</title> 
        <style type="text/css"> 
            .gritter-notice-wrapper { 
                left:200px; 
                top:50px; 
            } 
        </style> 

    </h:head> 
    <h:body>                 
        <ez:RepHeaderMenu/>
        <h1>TTA - Representative Manager Portal</h1> 

        <p:layout style="table-layout:auto; height:700px ">
            <p:layoutUnit position="left" header="Navigation" width="300">
                <ez:RepTTALeftMenu/>
            </p:layoutUnit>
            <p:layoutUnit position="center" header="Settings" scrollable="true">

                <p:panel id="sales" style="border-style: ridge" > 
                    <h:outputText value="Sales" style="font-family: sant-serif; font-size: x-large;
                                  font-weight: bold"/>
                    <br/>


                    <h:form id="salesChartFrom">
                        <h:panelGrid columns="2">
                            <p:lineChart id="salesChart"
                                         model="#{spipSalesMB.salesModel}"
                                         titleX="Month" width="850px" height="500px">
                                <p:chartSeries label="Sales" value="#{sale.revenue}"/>  
                            </p:lineChart>  

                            <h:panelGrid columns ="1">
                                <h:outputText value="Select Time range: "/>

                                <h:panelGrid columns="2">
                                    <h:selectOneMenu id="salesYearStart" value="#{spipSalesMB.salesYearStart}">
                                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                                        <f:selectItems value="#{spipSalesMB.startYears}" />
                                        <p:ajax update="salesMonthStart"   
                                                listener="#{spipSalesMB.handleStartYearChange}" />
                                    </h:selectOneMenu>
                                    <h:selectOneMenu id="salesMonthStart" value="#{spipSalesMB.salesMonthStart}">
                                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                                        <f:selectItems value="#{spipSalesMB.startMonths}" /> 
                                    </h:selectOneMenu>
                                </h:panelGrid>
                                <h:outputText value="------------TO------------" style="text-align: center"/>
                                <h:panelGrid columns="2">
                                    <h:selectOneMenu id="salesYearEnd" value="#{spipSalesMB.salesYearEnd}">
                                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                                        <f:selectItems value="#{spipSalesMB.endYears}" />
                                        <p:ajax update="salesMonthEnd"   
                                                listener="#{spipSalesMB.handleEndYearChange}" />
                                    </h:selectOneMenu>
                                    <h:selectOneMenu id="salesMonthEnd" value="#{spipSalesMB.salesMonthEnd}">
                                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                                        <f:selectItems value="#{spipSalesMB.endMonths}" />
                                    </h:selectOneMenu>
                                </h:panelGrid>
                                <p:commandButton value="Update" actionListener="#{spipSalesMB.updateStartEnd}"
                                                 update="salesChart"/>
                            </h:panelGrid>
                        </h:panelGrid>
                        <br/>
                        <h:outputText value="Sales Prediction" style="font-family: sant-serif; font-size: x-large;
                                      font-weight: bold"/>  
                        <br/>
                        <h:panelGrid columns="2">
                            <p:lineChart id="salesPredChart"
                                         model="#{spipSalesMB.salesWithPredModel}"
                                         titleX="Month" width="850px" height="500px">
                                <p:chartSeries label="Sales" value="#{sale.revenue}"/>  
                            </p:lineChart> 
                            <h:panelGrid columns="2">
                                <h:outputText value="Enter number of months to predict"/>
                                <h:outputText/>
                                <h:inputText value="#{spipSalesMB.numMonthToPred}"/>
                                <p:commandButton value="Update" actionListener="#{spipSalesMB.updateNumMonthToPred}"
                                                 update="salesPredChart"/>
                            </h:panelGrid>
                        </h:panelGrid>
                    </h:form>
                </p:panel>

                <p:panel id="reservations" > 
                    <h:outputText value="Reservations" style="font-family: sant-serif; font-size: x-large;
                                  font-weight: bold"/>
                    <br/>
                    <h:form>
                        <h:panelGrid columns="2">

                            <p:lineChart id="reservationsChart"
                                         model="#{spipReservationMB.reservationModel}"
                                         titleX="Month" width="850px" height="500px" />

                            <h:panelGrid columns ="1">
                                <h:outputText value="Select Time range: "/>
                                <h:panelGrid columns="2">
                                    <h:selectOneMenu id="rYearStart" value="#{spipReservationMB.reservationsYearStart}">
                                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                                        <f:selectItems value="#{spipReservationMB.startYears}" />
                                        <p:ajax update="rMonthStart"   
                                                listener="#{spipReservationMB.handleStartYearChange}" />
                                    </h:selectOneMenu>
                                    <h:selectOneMenu id="rMonthStart" value="#{spipReservationMB.reservationsMonthStart}">
                                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                                        <f:selectItems value="#{spipReservationMB.startMonths}" /> 
                                    </h:selectOneMenu>
                                </h:panelGrid>
                                <h:outputText value="------------TO------------" style="text-align: center"/>
                                <h:panelGrid columns="2">
                                    <h:selectOneMenu id="rYearEnd" value="#{spipReservationMB.reservationsYearEnd}">
                                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                                        <f:selectItems value="#{spipReservationMB.endYears}" />
                                        <p:ajax update="rMonthEnd"   
                                                listener="#{spipReservationMB.handleEndYearChange}" />
                                    </h:selectOneMenu>
                                    <h:selectOneMenu id="rMonthEnd" value="#{spipReservationMB.reservationsMonthEnd}">
                                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                                        <f:selectItems value="#{spipReservationMB.endMonths}" />
                                    </h:selectOneMenu>
                                </h:panelGrid>
                                <p:commandButton value="Update" actionListener="#{spipReservationMB.updateStartEnd}"
                                                 update="reservationsChart"/>
                            </h:panelGrid>
                        </h:panelGrid>
                        <br/>
                        <h:outputText value="Sales Prediction" style="font-family: sant-serif; font-size: x-large;
                                      font-weight: bold"/>
                        <br/>
                        <h:panelGrid columns="2">
                            <p:lineChart id="reservationsPredChart"
                                         model="#{spipReservationMB.reservationWithPredModel}" 
                                         titleX="Month" width="850px" height="500px" />
                            <h:panelGrid columns="2">
                                <h:outputText value="Enter number of months to predict"/>
                                <h:outputText/>
                                <h:inputText value="#{spipReservationMB.numMonthToPred}"/>
                                <p:commandButton value="Update" actionListener="#{spipReservationMB.updateNumMonthToPred}"
                                                 update="salesPredChart"/>
                            </h:panelGrid>
                        </h:panelGrid>
                    </h:form>
                </p:panel>

            </p:layoutUnit>
        </p:layout>
    </h:body> 
</html>